<template>
  <div id="RT-header">
    <div class="grid">
      <ul class="status item">
        <div class="title">
          {{ prop.label }}
        </div>
        <li class="mt-3px" v-for="item in list" v-show="item.show" :style="{ color: item.color, background: item.background }">{{
          item.label }}</li>
        <div class='recommend-to'>
          <img class="ml-10px mt-3px" style="cursor: pointer;height: 24px" @click="setPost"
            :src="getImageUrl(store.currentResume.label == 'Y' ? 'recommend.png' : 'disRecommend.png', 'applicationDetail')"
            alt="" srcset="">
        </div>
      </ul>
      <div :class="['item', getInterviewer() ? '' : 'hidden']">
        <div class="label">{{ getName() }}： </div>
        <div class="content">
          <span>{{ getInterviewer() }}</span>
          <i v-auth="'editInterviewer'"
            v-if="store.currentResume.processSort >= 11 && store.currentResume.processSort < 15"
            class="iconfont icon-bi icon" @click="editHR"></i>
          <i v-auth="'editPreserveHR'" v-else class="iconfont icon-bi icon" @click="editHR"></i>
        </div>
      </div>
      <div :class="['item', currentResume.processDetail ? '' : 'hidden']">
        <div class="label">当前状态:
        </div>
        <div class="content">
          <span>{{ currentResume.processDetail }}</span>
          <i v-auth="'editProcessStatus'" class="iconfont icon-bi " @click="editStatus"></i>
        </div>
      </div>
      <div class="item" :class="['item']" v-if="currentResume.touchlessCount">
        <div class="label">未联系上:
        </div>
        <div class="content">
          <span>{{ currentResume.touchlessCount }}
            <i class="iconfont icon-lishijilu" @click="openDisConnentModal"></i>
          </span>
        </div>
      </div>
    </div>
    <ModifyApplicationProgressModal ref="progressModal" @closeModal="closeModal">
    </ModifyApplicationProgressModal>
    <ChangeHRModal @closeModal="closeModal" ref="HRModal"></ChangeHRModal>
    <DisConnectModal ref="disconnectModalRef" @closeModal="disconnectModalRef.show = false"></DisConnectModal>
  </div>

</template>
<script setup lang='ts'>
import { ref, watch } from "vue"
import ModifyApplicationProgressModal from "../Modals/ModifyApplicationProgressModal.vue";  //修改应聘进度
import ChangeHRModal from "../Modals/ChangeHRModal.vue"; //修改约面HR
import DisConnectModal from "../Modals/DisConnectModal.vue"
import { updateLabel } from "@/api/application-details/index";
import { comStores } from '@/store/common/comStore';
import { getImageUrl } from "@/assets/common/common.ts";
import { message } from "ant-design-vue";
const store = comStores();

const prop = defineProps(['label', 'list', "statusInfo"]);
const list = ref([
  { label: "内推", color: "#FF4242", background: 'rgba(255,66,66,0.1)', show: false }
])
const currentResume = ref<any>({})
watch(() => store.currentResume, (val) => {
  list.value[0].show = val.isRecommends === 0;
  currentResume.value = store.currentResume
}, { deep: true, immediate: true })

const emits = defineEmits(['editStatus'])
const progressModal = ref<any>(ModifyApplicationProgressModal);
const HRModal = ref<any>(ChangeHRModal);
const editStatus = () => {
  progressModal.value.show = true
}

const editHR = () => {
  HRModal.value.showDialog(getInterviewer(), getName())
}

const getInterviewer = () => {
  const { processSort, interviewUser, preserveUser, interviewOfficer } = currentResume.value;
  if (processSort <= 7) {
    return interviewUser
  } else if (processSort > 7 && processSort < 15) {
    return interviewOfficer
  } else {
    return preserveUser
  }
}

const closeModal = () => {
  progressModal.value.show = false
  HRModal.value.show = false
}
const disconnectModalRef = ref<any>(null)
const openDisConnentModal = () => {
  disconnectModalRef.value.show = true
}

const getName = () => {
  const { processSort } = store.currentResume;
  if (processSort < 8) {
    return "约面HR"
  } else if (processSort >= 8 && processSort < 15) {
    return "面试官"
  } else {
    return "维护HR"
  }
}

const setPost = async () => {
  const { resumeId, label } = store.currentResume;
  const { userName } = store.userInFor
  const param = {
    resumeId,
    label: label !== "Y" ? "Y" : "N",    //推荐职能岗状态:null或者N:未推荐,Y:已推荐
    operator: userName
  }
  const data = await updateLabel(param)
  if (data && data.code == '10000') {
    message.success('设置成功')
    store.getResumeInfo(resumeId)
  } else {
    message.error(data.msg)
  }
}
</script>
<style lang="less" scoped>
#RT-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.title {

  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 28px;

}

.grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;

  .item {
    width: 50%;
    display: flex;

    &:nth-child(2n) {
      width: 50%;
      display: flex;
      justify-content: flex-end;
    }

    .label {
      display: flex;
    }
  }

}

.status {
  display: flex;

  li {
    margin-left: 8px;
    width: 44px;
    height: 24px;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    line-height: 24px;
  }
}

.content {
  display: flex;

  span {
    margin: 0 5px;
  }

  i {
    color: #209EE4;
    cursor: pointer;
  }
}

.hidden {
  visibility: hidden;
}
</style>